<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框架</title>
    <script>


        class vwCore {
            constructor(config) {
                this.config = config
            }
            getTemp = function () {
                let template = this.config.template.replaceAll("{{", '${').replaceAll("}}", '}')
                let data = this.config.data
                let that = this;
                console.log(template)
                template = `${template}`
                console.log(template)
                // Object.keys(this.config.data).forEach(function (key) {
                //     template = template.replace(`{{${key}}}`, `${a}`)
                // });

                let method = that.config.method
                let html = document.createRange().createContextualFragment(template);
                //绑定事件
                let element = [...html.children].filter(function (ele) {
                    let attrs = [...ele.attributes]
                    return attrs.filter(function (e) {
                        return e.name.indexOf("@") != -1
                    }).length > 0
                })
                for (const ele of element) {
                    for (const attr of [...ele.attributes]) {
                        ele.addEventListener(attr.name.replace("@", ""), function () {
                            that.config.currentElement = ele;
                            that.config.method[attr.value].apply(that)
                        }, false)
                        ele.removeAttribute(attr.name);
                    }
                }
                //绑定数据
                element = [...html.children].filter(function (ele) {
                    let attrs = [...ele.attributes]
                    return attrs.filter(function (e) {
                        return e.name.indexOf("#bind") != -1
                    }).length > 0
                })
                for (const ele of element) {
                    let attr = ele.getAttribute("#bind")
                    ele.addEventListener("change", function () {
                        that.config.data[attr] = ele.value
                        that.config.currentElement = ele;
                        that.view(that.config.parent)
                    }, false)
                    ele.value = that.config.data[attr]
                    ele.removeAttribute("#bind");
                }

                return html
            };
            setData = function (data) {
                let that = this;
                Object.keys(data).forEach(function (key) {
                    that.config.data[key] = data[key]
                });
                that.view(that.config.parent)
            }
            view = function (ele) {
                this.config.parent = ele;
                [...ele.children].forEach(e => { ele.removeChild(e) })
                ele.appendChild(this.getTemp())
                if(this.config.currentElement){
                    this.config.currentElement.focus()
                }
                
                return this;
            }
        };

        function vwTmp(config) {
            let vwcore = new vwCore(config)
            return vwcore;
        }

    </script>
</head>

<body>
    <div id="hello"></div>
    <div id="world"></div>
    <script>
        let hello = document.getElementById("hello")
        vwTmp({
            template: `
                <p>{{message}}</p>
                <p>{{message1}}</p>
                <button @click=onclick>点击</button>
            `,
            data: {
                message: "hello",
                message1: "世界",
            },
            method: {
                onclick: function () {
                    this.setData(
                        { message: "你好" }
                    )
                }
            }
        }).view(hello)

        let world = document.getElementById("world")
        vwTmp({
            template: `
                <p>${data.dd.d1}</p>
                <p>${data.message1}</p>
                <input type="txt" #bind=message name="msg"/>
                <button @click=onclick>点击</button>
            `,
            data: {
                message: "hello",
                message1: "世界 ",
                dd:{
                    d1:"123"
                }
            },
            method: {
                onclick: function () {
                    this.setData(
                        { message: "你好" }
                    )
                }
            }
        }).view(world)
    </script>
</body>

</html>